<template>
    <div class="recruitmentdetail">
        <van-nav-bar
            title="招聘详情"
            left-text=""
            fixed
            placeholder
            left-arrow
            @click-left="$router.back()"
        ></van-nav-bar>
        <div class="title">
            <van-cell-group>
                 <div class="title-item">
                     <div class="title-item-left">
                         <img :src="invite.cover" alt="">
                     </div>
                     <div class="title-item-right">
                         <div class="titles">
                            <h2>{{invite.title}}</h2>
                            <h3 @click="$router.push({path:'/recruitmentdetails',query:{id:invite.id}})">更多操作>></h3>
                         </div>
                         <span>{{invite.describes}}</span>
                         <div class="title-item-right-bottom">
                             <span>已投递:{{invite.count}}份</span>
                             <span>{{invite.gmtCreate}}</span>
                         </div>
                     </div>
                 </div>
             </van-cell-group>
        </div>
        <div class="content">
            <h3>简历列表</h3>
            <div class="content-item">
               <van-cell-group v-for="(item,index) in invite.customerList" :key="index" @click="tiaozhuan(item.type,item.tableId,item.resumeUrl)">
                    <div class="content-items">
                        <div class="content-item-left">
                            <img :src="item.image" alt="">
                        </div>
                        <div class="content-item-center">
                            <div class="content-item-center-top">
                                <span>{{item.nickname}}</span>
                                <img v-if="item.gender=='女'" src="../../assets/images/invite/nv.png" alt="">
                                <img v-else src="../../assets/images/invite/nan.png" alt="">
                            </div>
                            <div class="content-item-center-bottom">
                                <span>{{item.resumeTime}}</span>
                            </div>
                        </div>
                        <div class="content-item-right">
                            <img v-if="item.type==1" src="../../assets/images/invite/xiang.png" alt="">
                            <img v-if="item.type==2" src="../../assets/images/invite/jian.png" alt="">
                            <img v-if="item.type==3" src="../../assets/images/invite/pdfs.png" alt="">
                        </div>
                    </div>
               </van-cell-group>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            invite:{}
        }
    },

    mounted(){
        this.getmyRecruitInfo()
    },
    created(){
        document.querySelector("#app").style.width = "100%";
        document.querySelector("#app").style.height = "100vh";
        document.querySelector("#app").style.backgroundColor = "#f3f5f7";
    },
    methods:{
        tiaozhuan(type,tableId,resumeUrl){
            if(type==1){
                this.$router.push({path:"/onlineresume",query:{id:tableId}})
            }else if(type==2){
                this.$router.push({path:"/simpleresume",query:{id:tableId}})
            }else{
                this.$router.push({path:"/pdfpreview",query:{url:resumeUrl}})
            }
        },
        getmyRecruitInfo(){
            this.$api.getmyRecruitInfo({id:this.$route.query.id}).then(res=>{
                this.invite=res.data
            })
        }
    }
}
</script>

<style lang="less" scoped>
.content{
    height: calc(100vh - 96px) !important;
    padding-bottom: 50px;
    .content-item{
        width: 90%; 
        margin:20px;
        background: #ffffff;
        border-radius: 10px;
        margin-top: -15px;
        .content-items{
            display: flex;
            padding:10px;
            .content-item-left{
                flex: 1;
                img{
                    width: 50px;
                    height: 50px;
                    border-radius: 2em;
                }
            }
            .content-item-center{
                flex: 2;
                margin-right: 50px;
                .content-item-center-top{
                    display: flex;
                    img{
                        width: 20px;
                        height: 20px;
                        margin-left: 5px;
                    }
                }
                .content-item-center-bottom{
                    display: flex;
                    margin-top: 12px;
                    span{
                        color: #999999;
                        font-size: 14px;
                    }
                }
            }
            .content-item-right{
                flex: 1;
                font-size: 14px;
                color: #999999;
                margin-top: 12px;
                img{
                    width:30px;
                    height:30px;
                }
            }
        }
    }
    h3{
        padding: 30px;
    }
}
.title{
    .van-cell-group{
        .title-item{
            display: flex;
            padding: 12px;
            .title-item-left{
                width: 30%;
                img{
                    width: 200px;
                    height: 100px;
                }
            }
            .title-item-right{
                width: 75%;
                padding-left: 10px;
                line-height: 22px;
                .titles{
                    display: flex;
                    justify-content: space-between;
                    h2{
                        font-size: 18px;
                    }
                    h3{
                        color: rgb(211, 133, 133);
                        font-size: 14px;
                    }
                }
                span{
                    color: #999999;
                    font-size: 14px;
                    height: 45px;
                    margin-top: 5px;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .title-item-right-bottom{
                    display: flex;
                    justify-content: space-between;
                    margin-top: 15px;
                }
            }
        }
    }
}
</style>